Angular Material হল একটি UI component লাইব্রেরি যা Angular অ্যাপ্লিকেশনগুলির জন্য ডেভেলপারদের আধুনিক, প্রতিক্রিয়া-ভিত্তিক এবং অদ্বিতীয় ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এটি Google Material Design-এর প্রিন্সিপল অনুসরণ করে, যা একটি সুন্দর, ব্যবহারকারী বান্ধব এবং ইন্টুইটিভ ডিজাইন গাইডলাইন।

Angular Material Angular অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন বিল্ট-ইন কম্পোনেন্ট প্রদান করে, যেমন বোতাম, টেবিল, ডায়ালগ, স্লাইডার, ডেটা পিকার, টুলটিপ, গ্রিড লিস্ট এবং আরো অনেক কিছু। এর মাধ্যমে ডেভেলপাররা সহজে সুনির্দিষ্ট কম্পোনেন্ট ব্যবহার করতে পারে এবং একটি পেশাদারী UI তৈরি করতে পারে যা ডেস্কটপ এবং মোবাইল উভয় প্ল্যাটফর্মে সঠিকভাবে কাজ করে।

Angular Material এর বৈশিষ্ট্য

Angular Material কিছু বিশেষ বৈশিষ্ট্য নিয়ে আসে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সুবিধা প্রদান করে:

1. Material Design কম্পোনেন্ট: Angular Material বিভিন্ন প্রাক-বিল্ট কম্পোনেন্ট সরবরাহ করে যা Material Design গাইডলাইন অনুসরণ করে। এই কম্পোনেন্টগুলো হালকা, মোবাইল-ফ্রেন্ডলি এবং অত্যন্ত প্রতিক্রিয়া-ভিত্তিক (responsive)।
2. উন্নত UX: Angular Material কম্পোনেন্টগুলিতে উন্নত ইউজার এক্সপেরিয়েন্স (UX) থাকে, যেমন অ্যানিমেশন, ফর্ম ভ্যালিডেশন, এবং অটোমেটেড টুলটিপস, যা অ্যাপ্লিকেশনটির ব্যবহারকারীর জন্য আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে।
3. ডিভাইস-নিরপেক্ষ (Responsive): এই লাইব্রেরি মোবাইল ডিভাইস, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এর মাধ্যমে আপনি সহজেই রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে পারবেন।
4. কাস্টমাইজেশন: Angular Material ব্যবহারকারীদের কাস্টম থিম এবং স্টাইল কনফিগারেশনের মাধ্যমে UI কাস্টমাইজ করতে দেয়। আপনি সহজেই অ্যাপ্লিকেশনের লুক অ্যান্ড ফিল পরিবর্তন করতে পারেন।
5. ইন্টিগ্রেশন এবং ইন্টারঅ্যাকশন: Angular Material কম্পোনেন্টগুলির মধ্যে ইন্টিগ্রেশন খুবই সহজ। এগুলি সাধারণভাবে Angular Forms, RxJS এবং অন্যান্য Angular ফিচারের সাথে মসৃণভাবে কাজ করে।

Angular Material ব্যবহার শুরু করা

Angular Material ব্যবহার শুরু করতে কিছু সাধারণ স্টেপ অনুসরণ করতে হবে।

1. Angular Material ইনস্টলেশন

প্রথমে Angular CLI ব্যবহার করে Angular Material ইনস্টল করতে হবে। এই কমান্ডটি রান করুন:

ng add @angular/material

এটি Angular Material এবং এর ডিপেনডেন্সি ইনস্টল করবে এবং আপনার অ্যাপ্লিকেশন কনফিগারেশন ফাইলে প্রয়োজনীয় পরিবর্তন করবে।

2. প্রয়োজনীয় মডিউল ইমপোর্ট করা

Angular Material এর বিভিন্ন কম্পোনেন্ট ব্যবহার করতে হলে, প্রথমে আপনাকে সেগুলি ইমপোর্ট করতে হবে। উদাহরণস্বরূপ, যদি আপনি Material Button ব্যবহার করতে চান, তবে আপনাকে MatButtonModule মডিউলটি ইমপোর্ট করতে হবে।

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
})
export class AppModule {}

3. থিম কনফিগারেশন

Angular Material এর বিভিন্ন কম্পোনেন্টগুলো স্টাইল করার জন্য থিম কনফিগারেশন প্রয়োজন। এটি Angular Material এর নিজস্ব থিমিং সিস্টেম ব্যবহার করে। থিম সেট করার জন্য @angular/material এর থিম ফাইল ইমপোর্ট করতে হবে।

@import '~@angular/material/theming';
@include mat-core();

$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

এখানে $primary, $accent, এবং $warn থিমের কালার স্কিম হিসেবে ব্যবহার করা হবে।

4. Angular Material কম্পোনেন্ট ব্যবহার

একবার Angular Material ইনস্টল ও কনফিগারেশন সম্পন্ন হলে, এখন আপনি বিভিন্ন কম্পোনেন্ট ব্যবহার করতে পারবেন। নিচে কিছু সাধারণ কম্পোনেন্টের উদাহরণ:

Material Button:

<button mat-button>Click me!</button>

Material Input Field:

<mat-form-field>
  <mat-label>Enter your name</mat-label>
  <input matInput>
</mat-form-field>

Material Card:

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>This is the content of the card.</p>
  </mat-card-content>
</mat-card>

Angular Material কম্পোনেন্টের কিছু সাধারণ উদাহরণ

1. MatDialog (ডায়ালগ)

MatDialog কম্পোনেন্ট ব্যবহার করে আপনি একটি মডাল ডায়ালগ তৈরি করতে পারেন, যা ইউজারের সাথে যোগাযোগের জন্য ব্যবহৃত হয়।

import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-example',
  templateUrl: 'dialog-example.html',
})
export class DialogExampleComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    this.dialog.open(DialogOverviewExampleDialog);
  }
}

2. MatTable (টেবিল)

MatTable কম্পোনেন্ট ব্যবহার করে আপনি সহজে একটি রেসপনসিভ টেবিল তৈরি করতে পারেন।

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

3. MatSnackBar (স্ন্যাকবার)

MatSnackBar একটি নোটিফিকেশন বার যা স্বল্প সময়ের জন্য স্ক্রীনে প্রদর্শিত হয়।

import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-snackbar',
  templateUrl: './snackbar.component.html',
})
export class SnackbarComponent {

  constructor(private snackBar: MatSnackBar) {}

  openSnackBar() {
    this.snackBar.open('Message successfully sent!', 'Close', {
      duration: 2000,
    });
  }
}

সারাংশ

Angular Material হল Angular অ্যাপ্লিকেশনে Material Design অনুসরণ করে আধুনিক, প্রতিক্রিয়া-ভিত্তিক ইউজার ইন্টারফেস তৈরির একটি শক্তিশালী লাইব্রেরি। এটি ডেভেলপারদের জন্য বিভিন্ন বিল্ট-ইন কম্পোনেন্ট প্রদান করে, যা মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মে কার্যকরী। এর সহজ ইন্টিগ্রেশন, কাস্টমাইজেশন এবং রেসপনসিভ ডিজাইন ফিচার Angular অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে।